<!--
<script setup lang="ts">
import { computed, defineProps } from 'vue';

interface Props {
  value: number;
}

const props = defineProps<Props>();

const batteryLevel = computed(() => {
  if (props.value > 80) {
    return 'high';
  } else if (props.value > 50) {
    return 'medium';
  } else if (props.value > 20) {
    return 'low';
  } else {
    return 'critical';
  }
});

const batteryColor = computed(() => {
  switch (batteryLevel.value) {
    case 'high':
      return 'green';
    case 'medium':
      return 'yellow';
    case 'low':
      return 'orange';
    case 'critical':
      return 'red';
    default:
      return 'gray';
  }
});
</script>

<template>
  <div class="battery">
    <div class="battery-level" :style="{ width: props.value + '%', backgroundColor: batteryColor }"></div>
  </div>
</template>

<style scoped>
.battery {
  width: 200px;
  height: 50px;
  border: 2px solid #333;
  position: relative;
  background-color: #e6e6e6;
  border-radius: 5px;
}

.battery-level {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
</style>
-->
<template>
  <div class="my-battery-container">
    <div class="my-battery-body">
      <div v-if="!status"
          v-for="n in 3"
          :key="n"
          class="my-battery-cell"
          :class="{'filled': n <= filledCells}"
      ></div>
      <div v-else class="my-in-charge">
      </div>
    </div>
    <div class="my-battery-tip"></div>
  </div>
</template>

<script setup lang="ts">
import {computed, defineProps} from 'vue'

interface Props {
  level: number
  status: boolean
}

const props = defineProps<Props>()

// 计算填充的电池格数
const filledCells = computed(() => {
    if (props.level > 66) return 3
    if (props.level > 33) return 2
    if (props.level > 0) return 1
  return 0
})

</script>

<style scoped>
.my-battery-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.my-battery-body {
  width: 15px;
  height: 10px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  display: flex;
  position: relative;
}

.my-battery-cell {
  width: 8px;
  height: 80%;
}

.my-battery-cell:last-child {
  border-right: none;

}

.my-battery-cell.filled {
  background-color: #FFF;
  margin: 1px;
}
.my-in-charge{
  height: 100%;
  width: 100%;
  background-image: url("@/assets/charge.png");
  background-size:40% 90%;
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
}
.my-battery-tip {
  width: 1.5px;
  height: 6px;
  background-color: #f6f6f6;
  margin-left: 0px;
}
</style>
